<template>
  <section id="recharge">
    <div v-if="!isDetail">
      <Base-UserMoneyInfo :type='type'></Base-UserMoneyInfo>
      <div class="money_list">
        <div class="title">充值金额</div>
        <ul>
          <li :class="index == tabIndex ? 'active' : ''" v-for="(item,index) in moneyList" :key="index" @click="tabIndex=index;rechargeMoney=''">
            <div>${{item.money}}</div>
            <div v-if="lists">
              <!-- ≈{{(Math.ceil(Number(item.money)*Number(lists.new_price))).toFixed(2)}}元 -->
                ≈ {{(Math.ceil(Number(item.money)*Number(lists.new_price)*100)/100).toFixed(2)}}元
              </div>
            <div v-else>≈ {{(Math.ceil(Number(item.money)*defaultRate)).toFixed(2)}}元</div>
          </li>
        </ul>
        <div class="customize_money" v-if="moneyList" :class="tabIndex === moneyList.length && 'active'" @click="tabIndex = moneyList.length">
          <input type="text" v-model="rechargeMoney" maxlength="10" placeholder="输入金额" @input="clearNoNum(rechargeMoney)">
          <span v-if="lists">
            <!-- ≈{{(Math.ceil(Number(Number(rechargeMoney).toFixed(2))*Number(lists.new_price))).toFixed(2)}}元 -->
            ≈ {{(Math.ceil(Number(Number(rechargeMoney).toFixed(2))*Number(lists.new_price)*100)/100).toFixed(2)}}元
            </span>
          <span v-else>≈{{(Math.ceil(Number(Number(rechargeMoney).toFixed(2))*defaultRate)).toFixed(2)}}元</span>
        </div>
      </div>
      <div class="recharge_methods">
        <div class="title">充值方式</div>
        <ul>
          <li class="clearfix" v-for="(item,index) in rechargeMethods" :key="index" :class="index === methodsIndex ? 'active' : ''" @click="methodsIndex = index">
            <!-- <div class="icon pull_left" :class="item.type==='zfb' ? 'zfb' : item.type === 'wx' ? 'wx' :item.type === 'yh' ? 'yh' : item.type === 'kj' ? 'kj' : 'yh'"></div> -->
            <img class="icon" :src="item.img" alt="" width="40">
            <div class="name pull_left">{{item.name}}</div>
            <div class="desc pull_left">{{item.des}}</div>
            <div class="radio pull_right"></div>
          </li>
        </ul>
        <div class="confrim">
          <a href="javascript:;" @click="comfirmRecharge"><span v-show="!gifShow">确认充值</span><img src="../../assets/image/whiteLoading.svg" v-show="gifShow" width="25"></a>
        </div>
      </div>
    </div>
    <div v-else>
      <Base-OrderDetail :orderData="orderData"></Base-OrderDetail>
    </div>
    
  </section>
</template>
<script>
import {_getRechargeMoneyList,_getRechargeMethodList,_getUserInfo,_getUserMoneyArea,_recharge,_getRate} from '../../axios/index.js';
export default {
  data() {
    return {
      show:true, // 余额是否显示
      tabIndex:0,// 金额列表index
      methodsIndex:0,// 充值方式index
      moneyList:[],
      rechargeMoney:'',
      defaultRate:6.75,
      rechargeMethods:[],
      gifShow:false,
      moneyArea:'',
      isDetail:false,
      orderData:null,
      type:1,// 充值为1，提现为2
    }
  },
  computed:{
    lists() {
      let _self = this;
      // let lists = this.$store.state.symbolList;
      // if (lists) {
      //   for (let i = 0; i < lists.length; i++) {
      //     for (let j = 0; j < lists[i]["goods_list"].length; j++) {
      //       if (lists[i]["goods_list"][j]["id"] == 16) {
      //         let new_price =
      //           lists[i]["goods_list"][j]["inAndOut"]["new_price"];
      //         return {
      //           new_price: new_price
      //         };
      //       }
      //     }
      //   }
      // }
      return {
        new_price:_self.defaultRate
      }
    }
  },
  methods:{
    async getRate() {
      const res = await _getRate();
      if (res.data.code === 200) {
        this.defaultRate = res.data.data;
      }
    },
    clearNoNum(val){ 
      val = val.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
      val = val.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
      val = val.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数  
      if(val.indexOf(".")< 0 && val !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
          val = parseFloat(val); 
      }
      this.rechargeMoney = val;   
    },
    async getRechargeMoneyList() {
      let _self = this;
        const res = await _getRechargeMoneyList();
        if (res.data.code === 200) {
          _self.moneyList = res.data.data;
        }
    },
    async getRechargeMethodList() {
      let _self = this;
        const res = await _getRechargeMethodList();
        if (res.data.code === 200) {
          _self.rechargeMethods = res.data.data;
        }
    },
    async getUserMoneyArea() {
      const res = await _getUserMoneyArea();
      if (res.data.code === 200) {
        this.moneyArea = res.data.data;
      }
    },
    comfirmRecharge() {
      let _self = this;
      let rechargeMoney = _self.rechargeMoney ? _self.rechargeMoney : (_self.tabIndex != _self.moneyList.length ? _self.moneyList[_self.tabIndex].money : '');
      if (_self.tabIndex == _self.moneyList.length && rechargeMoney && Number(rechargeMoney) < Number(_self.moneyArea.in_money_min) || 
      Number(rechargeMoney) > Number(_self.moneyArea.in_money_max)) {
        this.$Message.error('金额范围必须在'+_self.moneyArea.in_money_min+'~'+_self.moneyArea.in_money_max+'之间');
        return;
      } else if (_self.tabIndex == _self.moneyList.length && !rechargeMoney) {
        this.$Message.error('金额不能为空');
        return;
      }
      this.recharge();
    },
    async recharge() {
      let _self = this;
      let money = '';
      if (_self.tabIndex < _self.moneyList.length) {
        money = _self.moneyList[_self.tabIndex].money;
      } else if (_self.tabIndex == _self.moneyList.length) {
        money = Number(_self.rechargeMoney).toFixed(2); // 提现金额(美元)
      }
      let type = _self.rechargeMethods[_self.methodsIndex].id;
      let price_limit = _self.rechargeMethods[_self.methodsIndex].price_limit;
      let limitRMB = Math.ceil(money*_self.lists.new_price);
      if (price_limit == 1 && limitRMB > 5000) {
        this.$Message.warning('该通道金额不能超过5000元');
        return;
      }
      _self.gifShow = true;
      const res = await _recharge(money,type);
      if (res.status) {
        _self.gifShow = false;
      }
      if (res.data.code === 200) {
        let data = res.data.data;
        _self.orderId = data.order_id;
        switch (Number(data.type)) {
          case 1:
            // 跳转H5链接
              let url = data.pay_path;
           
              if (!url)
              return;
              window.open(url, '_blank').location;
            break;
          case 2:
            // 银行卡打款
            // _self.$router.push('/topUpDetail/1/'+data.order_id);
            this.isDetail=true;
            this.orderData = data;
            break;
          case 3:
            // _self.$router.push('/topUpDetail/2/'+data.order_id);
            console.log('支付宝打款')
            // 支付宝打款
            break;
          case 4:
            // _self.$router.push('/topUpDetail/3/'+data.order_id);
            console.log('微信打款')
            // 微信打款
            break;
          default:
            this.$Message.error('支付类型错误');
            break;
        }
      } else {
        this.$Message.error(res.data.msg);
      }
    }
  },
  created() {
    //获取用户信息
    this.$store.dispatch("getUser");
    this.$emit('title','快速充值');
    this.getRate();
    this.getRechargeMoneyList();
    this.getRechargeMethodList();
  }
}
</script>
